<template>
	<view class="info">
		<!-- 头像区域 -->
		<view class="user-tou">
			<view class="tou-img">
				<image :src="userInfo.avatarUrl"></image>
			</view>
			<text>{{userInfo.nickName}}</text>
		</view>
		
		<!-- 主体区域 -->
		<view class="mianban">
			<!-- 第一个面板 -->
			<view class="first-mianban">
				<view class="first-item">
					<text>8</text>
					<text>收藏的店铺</text>
				</view>
				<view class="first-item">
					<text>14</text>
					<text>收藏的商品</text>
				</view>
				<view class="first-item">
					<text>18</text>
					<text>关注的商品</text>
				</view>
				<view class="first-item">
					<text>40</text>
					<text>足迹</text>
				</view>
			</view>
			<!-- 第二个面板 -->
			<view class="second-mianban">
				<!-- 面板标题 -->
				<view class="second-title">
					<text>我的订单</text>
				</view>
				<view class="second-body">
					<view class="body-item">
						<image src="../../static/my-icons/icon1.png"></image>
					    <text>代付款</text>
					</view>
					<view class="body-item">
						<image src="../../static/my-icons/icon2.png"></image>
					    <text>待收货</text>
					</view>
					<view class="body-item">
						<image src="../../static/my-icons/icon3.png"></image>
					    <text>退款运费</text>
					</view>
					<view class="body-item">
						<image src="../../static/my-icons/icon4.png"></image>
					    <text>全部订单</text>
					</view>
				</view>
			</view>
			
			<!-- 第三个面板 -->
			<view class="tress-mianban">
				<view class="tress-item">
					<text>收货地址</text>
					<text>＞</text>
				</view>
				<view class="tress-item">
					<text>联系客服</text>
					<text>></text>
				</view>
				<view class="tress-item" @click="loginOut">
					<text>退出登录</text>
					<text>></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		name:"my-info",
		data() {
			return {
			 
			};
		},
		methods:{
			...mapMutations('m_user',['setAddress','addUserInfo','addToken']),
			async loginOut(){
			 const [err,succ] = await uni.showModal({
					title:'确定要退出登录吗?',
				}).catch(err => err)
				
				if(succ && succ.confirm){
					 console.log('退出登录')
					 this.setAddress({})
					 this.addUserInfo({})
					 this.addToken('')
				}
			}
		},
		computed: {
			...mapState('m_user',['userInfo'])
		}
	}
</script>

<style lang="scss">
   .info{
	   padding-top: 20%;
	   height: 360rpx;
	   background-color: #c00000;
	   .user-tou{
		   display: flex;
		   flex-direction: column;
		   align-items: center;
		   .tou-img{
			   image{
				   width: 100px;
				   height: 100px;
				   border-radius: 50%;
				   border: 1px solid #fff;
				   background-color: #fff;
				   box-shadow: bottom 1px 1px black;
				   margin-bottom: 10px;
			   }
		   }
		   text{
		   		color: #fff;
		   		font-size: 16px;
		   }
	   }
	   .mianban{
		   display: flex;
		   flex-direction: column;
		   align-items: center;
		   .first-mianban{
			   margin-top: 80rpx;
			   width: 96%;
			   background-color: #fff;
			   border-radius: 5px;
			   display: flex;
			   flex-direction: row;
			   justify-content: space-around;
			   align-items: center;
			   .first-item{
				   display: flex;
				   flex-direction: column;
				   align-items: center;
				   text{
					   margin: 5px;
				   }
			   }
		   }
		   .second-mianban{
			   margin-top: 10px;
			   background-color: #fff;
			   border-radius: 5px;
			   width: 96%;
			   height: 115px;
			   display: flex;
			   flex-direction: column;
			   justify-content: space-around;
			   .second-title{
				   margin: 10px;
				   border-bottom: 1px solid #efefef;
			   }
			   .second-body{
				   display: flex;
				   flex-direction: row;
				   align-items: center;
				   justify-content: space-around;
				   .body-item{
					   display: flex;
					   flex-direction: column;
					   align-items: center;
					   image{
						   width: 30px;
						   height: 30px;
					   }
					   text{
						   font-size: 14px;
					   }
				   }
			   }
		   }
		   .tress-mianban{
			   margin-top: 10px;
			   width: 96%;
			   height: 240rpx;
			   border-radius: 5px;
			   display: flex;
			   flex-direction: column;
			   justify-content: space-around;
			   background-color: #fff;
			   .tress-item{
                  margin: 5px;
				   display: flex;
				   flex-direction: row;
				   justify-content: space-between;
				   align-items: center;
				   padding-top: 10px;
			   }
		   }
	   }
   }
</style>